<script setup lang="ts">
import fileTree from '@/components/file-tree/index.vue'
import SvgIcon from "@/components/svg-icon/index.vue";
import loading from "@/components/loading/index.vue"
import Preview from "@/components/preview/index.vue";


import {ref, watch} from 'vue'
import {fileList} from "@/api/file";
import {useCommonStore} from "@/stores/common";
import {ElMessage} from 'element-plus'
import {useUserInfoStore} from "@/stores/user_info";
import {download} from "@/api/file";
import {getBaseUrl} from "@/utils/env";

const userInfoStore = useUserInfoStore()
userInfoStore.selectUserInfo()

let list = ref([])
const commonStore = useCommonStore()
let showLoading = ref(true)

// 获取文件列表
fileList({parentId: commonStore.folderIndex}).then((res: any) => {
  list.value = res.data
  showLoading.value = false
})

// 文件面包屑
const breadcrumb: any = ref([])
breadcrumb.value = commonStore.breadcrumbs

const breadcrumbBox = ref<any>({})
const type = ref<any>('')
const id = ref<any>('')
const dialog = ref()
// 文件树点击事件
const changeFileTree = (item: any) => {
  // 如果是文件在进入文件
  if (item.type == "folder") {
    showLoading.value = true
    commonStore.breadcrumbs.push(item)
    commonStore.folderIndex = commonStore.breadcrumbs[commonStore.breadcrumbs.length - 1].id
    commonStore.refresh = !commonStore.refresh
  } else {
    // 文件状态不对不支持预览，直接返回
    if (item.status != 0) {
      ElMessage({
        message: '该状态不支持预览',
        type: 'error',
        plain: true,
      })
      return
    }
    // 如果是图片在预览
    commonStore.isPreview = true
    type.value = item.type
    id.value = item.id
  }
}

//全选/反选
const checkAll = ref(false)
const handleCheckAllChange = (val: boolean) => {
  checkAll.value = val
  list.value.forEach((item: any) => {
    item.ischeck = val
    let index = commonStore.checkItem.findIndex((i: any) => i.id == item.id)

    if (val && index == -1) {
      commonStore.checkItem.push(item)
    }
  })

  console.log(commonStore.checkItem)
  if (!val) {
    commonStore.checkItem.length = 0
  }
}

const checkItem = (val: any) => {
  let index = commonStore.checkItem.findIndex((item: any) => item.id == val.id)
  if (index != -1) {
    commonStore.checkItem.splice(index, 1)
  } else {
    commonStore.checkItem.push(val)
  }
  checkAll.value = list.value.every((item: any) => item.ischeck);
  console.log(commonStore.checkItem)
}

const toPath = (id: any, index?: any) => {
  // 如果是当前选中就直接返回
  if (commonStore.folderIndex == id) {
    return;
  }
  // 如果是根元素就清除面包屑
  if (id == -1) {
    commonStore.breadcrumbs.length = 0
    commonStore.folderIndex = 0
    commonStore.refresh = !commonStore.refresh
    return;
  }
  // 查询元素下标
  let currentItem = commonStore.breadcrumbs.find((item: any) => {
    return item.id == id
  })
  commonStore.breadcrumbs.splice(index + 1, commonStore.breadcrumbs.length - index)
  commonStore.folderIndex = currentItem.id
  commonStore.refresh = !commonStore.refresh
}

const sharingFile = (val: any) => {
  let index = commonStore.checkItem.findIndex((item: any) => item == val.id)
  if (index == -1) {
    commonStore.checkItem.push(val)
  }
  commonStore.showShare = true
  commonStore.shareTitle = commonStore.checkItem[0].name + `等${commonStore.checkItem.length}个文件`
}

// 鉴定搜索列表，更新列表项
watch(() => commonStore.searchList, (newVal: any) => {
  list.value = newVal
})


// 下载文件
const downloadFile = (val: any) => {

  download({
    ids: val.id
  }).then((res: any) => {

    let link = document.createElement("a");
    link.download = decodeURIComponent(val.name);
    link.style.display = "none";
    const serviceUrl = getBaseUrl()
    link.href = serviceUrl + "/file/download?token=" + res.data;
    link.click();
    link.remove();
    // 提示开始下载
    ElMessage({
      message: '创建下载成功',
      type: 'success',
      plain: true,
    })

  })
}

</script>

<template>
  <div class="home-item">
    <teleport to="body">
      <div v-if="commonStore.isPreview" class="preview">
        <Preview :type="type" :id="id"></Preview>
      </div>
    </teleport>
    <div class="breadcrumb">
      <div style="cursor: pointer;min-width: 60px;user-select: none" @click="toPath(-1)">
        我的文件
      </div>
      <div>
        <el-breadcrumb style="width: 100%;display: flex;align-items: center" separator="/">
          <div v-if="breadcrumb.length > 0">&nbsp;&nbsp;->&nbsp;&nbsp;</div>
          <div class="breadcrumb-box">
            <el-breadcrumb-item v-for="(item,index) in breadcrumb" @click="toPath(item.id,index)" :key="index">
              <div style="display: flex;cursor: pointer">
                <div class="breadcrumb-item">{{ item.name }}</div>
              </div>
            </el-breadcrumb-item>
          </div>
        </el-breadcrumb>
      </div>
    </div>

    <div v-if="showLoading" class="loading">
      <loading></loading>
    </div>

    <div v-show="!showLoading">
      <file-tree class="file-tree" @check="checkItem" @onclick="changeFileTree" :list="list">
        <template #header>
          <table style="table-layout: fixed;width: 100%;height: 40px;border-bottom: 1px solid #ccc;">
            <colgroup class="tab_column">
              <col width="5%">
              <col width="45%">
              <col width="10%">
              <col width="20%">
              <col width="20%">
            </colgroup>
            <thead>
            <tr>
              <th>
                <el-checkbox
                    v-model="checkAll"
                    @change="handleCheckAllChange"></el-checkbox>

              </th>
              <th>
                <div style="text-align: left;margin-left: 15px">
                  文件
                </div>
              </th>
              <th>
              </th>
              <th>
                创建时间
              </th>
              <th>
                大小
              </th>
            </tr>
            </thead>
          </table>
        </template>
        <template v-slot="menu">
          <div style='display: flex;gap: 20px;justify-content: center'>
            <el-tooltip
                effect="dark"
                content="分享"
                placement="top"
                :show-after="100"
                :hide-after="0"
            >
              <div style="background-color: #FAFAFA" @click="sharingFile(menu.menu)">
                <svg-icon style="width: 25px;height: 25px" name="share"/>

              </div>

            </el-tooltip>
            <el-tooltip
                effect="dark"
                content="下载"
                placement="top"
                :hide-after="0"
                :show-after="100"
            >
              <div style="background-color: #FAFAFA" @click="downloadFile(menu.menu)">
                <svg-icon style="width: 25px;height: 25px;" name="down"/>
              </div>

            </el-tooltip>


          </div>

        </template>
      </file-tree>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home-item {
  width: 100%;
  height: 100%;

  .breadcrumb {
    max-width: 1300px;
    width: 100%;
    height: 40px;
    border-radius: 15px;
    top: 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;

    .breadcrumb-item {
      max-width: 110px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 10px 0;
    }

    .breadcrumb-box {
      max-width: 1100px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-end;
      overflow: hidden;
    }

  }

}

.preview {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 100;
}
</style>